<template>
  <div id="app" class="app-page">
    <root>
      <safe-header
        v-bind="{
          title: '源单查询',
          isBack: true,
          backIconColor: '#fff',
          fixedTop: true,
        }"
      />
      <div>
        <!--<v-container>-->
          <!--<v-row>-->
            <!--<v-col :cols="12" class="pb-0">-->

              <!--<v-text-field-->
                <!--dense-->
                <!--:prepend-inner-icon="mdiMagnify"-->
                <!--v-model="value"-->
                <!--solo-->
                <!--hide-details-->
                <!--placeholder="请输入入库单号进行查询"-->
                <!--@input="chooseConditions"-->
                <!--style="font-size: 14px"-->
              <!--&gt;</v-text-field>-->
            <!--</v-col>-->
          <!--</v-row>-->
        <!--</v-container>-->
        <v-container width:80%>
          <v-card
            class="mx-auto my-2 list_card"
            max-width="374"
            v-for="item in warehouseOrderList"
            :key="item.code"
            outlined
            @click="warehouseOrderClick(item)"
            style="board: thin solid #cacbcc"
          >
            <v-card-title class="pb-3 card-title"
            ><v-row>
              <v-col cols="10" class="py-0 d-flex align-center"
              >{{ item.billNo
                }}<span class="ms-2 card-tag">{{
                  item.statesLabel
                  }}</span></v-col
              >
              <v-col
                class="text-right py-0 pr-0 d-flex align-center justify-end"
              >
                <v-icon color="#CACBCC">{{ svgpath }}</v-icon></v-col
              >
            </v-row></v-card-title
            >
            <v-divider class="my-0 card-sp-line"></v-divider>

            <v-card-text>
              <v-row >
                <v-col cols="3" class="py-1"  style="color: #999999"   @click="warehouseOrderClick(item)">出库单号</v-col>
                <v-col class="ms-2 py-1 text-right" style="font-size: 0.75rem; color: #666666">
                  {{ item.billNo }}
                </v-col>
              </v-row>



              <v-row class="d-flex flex-row justify-space-between">
                <v-col cols="4" class="py-1 card-lable">供应商</v-col>
                <v-col class="ms-2 py-1 text-right card-value">
                  {{ item.supplier }}
                </v-col>
              </v-row>

              <v-row>
                <v-col cols="3" class="py-1" style="color: #999999">创建人</v-col>
                <v-col class="ms-2 py-1 text-right" style="font-size: 0.75rem; color: #666666">
                  {{ item.createUserName }}
                </v-col>
              </v-row>

              <v-row class="d-flex flex-row justify-space-between">
                <v-col cols="3" class="py-1 card-lable">创建日期</v-col>
                <v-col class="ms-2 py-1 text-right card-value">
                  {{ item.createTime }}
                </v-col>
              </v-row>
            </v-card-text>
          </v-card>
        </v-container>
      </div>
    </root>
  </div>
</template>

<script>
  import SafeHeader from "../../components/safeHeader_wms";
  import Storage from "@/utils/storage.js";
  import wms from "../../utils/http.js";
  import { apiList } from "@/static/apiList";
  import { mdiChevronRight, mdiMagnify } from "@mdi/js";
  import Root from "@/components/Root.vue";
  // import qs from "qs";

  export default {
    name: "RawMaterialsOut_OrderList",
    components: {
      SafeHeader,
      Root,
    },
    data() {
      return {
        svgpath: mdiChevronRight,
        mdiMagnify: mdiMagnify,
        value: "",
        states: [
          { name: "NCONV1001841201612", id: "NCONV1001841201612" },
          { name: "NCONV1001841201613", id: "NCONV1001841201613" },
          { name: "NCONV1001841201614", id: "NCONV1001841201614" },
          { name: "NCONV1001841201615", id: "NCONV1001841201615" },
          { name: "NCONV1001841201616", id: "NCONV1001841201616" },
        ],
        // infoList: [],
        warehouseOrderList: [],
      };
    },
    computed: {},
    methods: {
      customFilter(item, queryText) {
        // 选择项   输入的查询字段   显示值(name)
        const textOne = item.name.toLowerCase();
        const textTwo = item.abbr.toLowerCase();
        const searchText = queryText.toLowerCase();
        return (
          textOne.indexOf(searchText) > -1 || textTwo.indexOf(searchText) > -1
        );
      },
      // 当前选中值发生变化时
      chooseConditions(text) {
        // 更改下方列表
        this.warehouseOrderList = this.infoList.filter((item) => {
          if (item.code.includes(text)) {
            return item;
          }
        });
      },
      // 获取列表
      getListData() {
        console.log(123);
      },
      warehouseOrderClick(item) {
        console.log(`----------------------------------------${item.billNo}`);
        if (window.navigator.userAgent.toLowerCase().includes("apicloud")) {
          window.api.sendEvent({
            name: "RawMaterialsOutManage",
            extra: {
              billNo: item.billNo,
            },
          });
          window.api.openWin({
            name: "RawMaterialsOutManage",
            url: "./RawMaterialsOutManage.html",
            pageParam: {
              billNo: item.billNo,
            },
          });
        } else {
          this.$root.api.api.sendEvent({
            name: "RawMaterialsOutManage",
            extra: {
              billNo: item.billNo,
            },
          });
          this.$root.api.api.openWin({
            name: "RawMaterialsOutManage",
            url: "./RawMaterialsOutManage.html",
            pageParam: {
              billNo: item.billNo,
            },
          });
        }
      },
    },
    mounted() {
      console.log(11);
      // let itemCode = window.api.pageParam.itemCode;
      // console.log("itemCode:" + itemCode);
      let params = {
        wareId: Storage.getObject("loginConfig").wareIds[0],
        asnState: 0,
        insertType: 0,
        asnType: 24,
      };
      // console.log("params:" + params);
      // if (itemCode) {
      //   let params2 = { itemCode: itemCode };
      //   wms
      //     .get({ url: "/asn/details/listByItemCode", data: params2 })
      //     .then((res) => {
      //       console.log(JSON.stringify(res.data.data));
      //       this.infoList = res.data.data.list;

      //       let asnStates = apiList.asnStates;
      //       this.infoList.forEach((item) => {
      //         asnStates.forEach((val) => {
      //           if (item.asnState == val.value) {
      //             item.statesLabel = val.label;
      //           }
      //         });
      //       });
      //       this.warehouseOrderList = this.infoList;
      //     });
      // } else {
      wms.get({ url: "/asn/masters/list", data: { params } }).then((res) => {
        console.log(res);
        this.infoList = res.data.data.list;
        let asnStates = apiList.asnStates;
        this.infoList.forEach((item) => {
          asnStates.forEach((val) => {
            if (item.asnState == val.value) {
              item.statesLabel = val.label;
            }
          });
        });
        this.warehouseOrderList = this.infoList;
      });
      // }
    },
  };
</script>

<style lang="scss" scoped>
</style>
